<template>
  <view class="cates">
    <searchBox></searchBox>
    <!-- 内容分类 -->
    <view class="cates_container">
      <!-- 左侧菜单 -->

      <scroll-view scroll-y class="left_menu">
        <view class="menu_item" :class=" [index===activeIndex?'active':'']" v-for="item,index in left" :key="index"
          @click="handleItemTap(index)">{{item}}
        </view>
      </scroll-view>
      <!-- 右侧菜单 -->
      <scroll-view scroll-y class="right_menu">
        <view class="goods_group" v-for="item1 in right" :key="item1.cat_id">

          <view class="goods_title">
            <text class="delimiter">/</text>
            <text class="title">{{item1.cat_name}}</text>
            <text class="delimiter">/</text>
          </view>
          <view class="goods_list">
            <navigator :url="`/pages/goods_list/goods_list?cid=${item2.cat_id}`" v-for="item2,index2 in item1.children"
              :key="item2.cat_id">
              <image mode="widthFix" :src="item2.cat_icon"></image>
              <view class="goods_name">{{item2.cat_name}}</view>
            </navigator>
          </view>
        </view>

      </scroll-view>
    </view>
  </view>
</template>

<script>
import searchBox from "../../components/searchBox/searchBox.vue";
import request from "../../utils/request.js";
export default {
  components: {
    searchBox,
  },
  data() {
    return {
      classifyList: [],
      left: [],
      right: [],
      // 被点击的索引
      activeIndex: 0,
    };
  },

  created() {
    //   // 判断缓存
    //   // 1判断本地存储中有没有旧的数据 没有就调用请求 有数据就用本地的旧数据
    const Cates = uni.getStorageSync("cates");
    if (!Cates) {
      // 没有本地缓存
      console.log("没有缓存");
      this.getclassifyList();
    } else {
      if (Date.now() - Cates.time > 1000 * 300) {
        console.log("超时发请求");
        this.getclassifyList();
      } else {
        console.log("旧的数据");
        this.classifyList = Cates.data;
        this.left = Cates.data.map((v) => v.cat_name);
        this.right = Cates.data[0].children;
      }
    }
  },
  methods: {
    async getclassifyList() {
      const res = await request("/categories");
      if (res.meta.status !== 200) {
        uni.showToast({
          title: "数据请求失败",
        });
      } else {
        // 请求成功存储数据
        uni.setStorageSync("cates", {
          time: Date.now(),
          data: res.message,
        });
        this.classifyList = res.message;
        this.left = res.message.map((v) => v.cat_name);
        this.right = res.message[0].children;
      }
    },
    // 动态索引
    handleItemTap(index) {
      this.activeIndex = index;
      this.right = this.classifyList[index].children;
    },
  },
};
</script>

<style lang="less" scoped>
page {
  height: 100%;
}
.cates {
  height: 100%;
  .cates_container {
    height: ~"calc(100vh - 80rpx)";
    display: flex;
    .left_menu {
      flex: 2;
      .menu_item {
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30rpx;
        opacity: 0.7;
        font-weight: 600;
      }
      .active {
        color: #f95314;
        border-left: 4px solid #f95314;
      }
    }
    .right_menu {
      margin-top: 20rpx;
      flex: 5;
      .goods_group {
        .goods_title {
          height: 80rpx;
          display: flex;
          // 水平居中
          justify-content: center;
          // 垂直居中
          align-items: center;
          .delimiter {
            color: #ccc;
            padding: 0 10rpx;
          }
          .title {
          }
        }
        .goods_list {
          display: flex;
          flex-wrap: wrap;
          navigator {
            width: 33.33%;
            text-align: center;
            image {
              width: 50%;
            }
            .goods_name {
            }
          }
        }
      }
    }
  }
}
</style>
